<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title></title>
	<link rel="stylesheet" href="style/base.css" />
	<style>
	.container {
  	width: 880px;
  	margin: 0 auto; }

	header {
  		height: 88px;
  		border-bottom:1px solid black;
  		position: relative; }
  	header h1 {
	    width: 164px;
	    height: 25px;
	    font-size: 16px;
	    background: url(image/logo.png) no-repeat left;
	    background-size: 100%;
	    text-indent: -9999px;
	    position: absolute;
	    top: 50%;
	    margin-top: -12px; }
  	header ul {
	    position: absolute;
	    left: 220px;
	    top: 50%;
	    margin-top: -21px; }
    header ul li {
      float: left;
      font-size: 14px; }
    header ul li a {
        padding: 15px; }
    header ul li a:hover {
        background: #333;
        color: #fff; }
    header ul .border {
      width: 1px;
      height: 12px;
      border-left: 1px solid black;
      padding: 0;
      margin-top: 19px; }
  	header .nav-right {
	    position: absolute;
	    right: 0;
	    top: 50%;
	    margin-top: -12px; }
    header .nav-right img {
      padding: 10px; }
    header .nav-right a:hover {
      background: #323232;


       }


     /*中部*/
    

    section{
    	height:189px;
    }
    section h2{
    	height:98px;
    	line-height:98px;
    	text-align:center;
    	font-size:36px;
    }
    section p{
    	font-size:16px;
    	width:334px;
    	margin:0 auto;
    }
    section .p2{
    	width:153px;
    	line-height:35px;
    	margin:0 auto;
    }

    .section1{
    	width:854px;
    	margin: 0 auto;
    	height:306px;
    	margin-bottom:38px;
    }
    .section1 .left{
    	width:213px;
    	height:306px;
    	background:#383838;
    	color:#fff;
    }
    .section1 .left .left-top{
    	height:60px;
    	line-height:60px;
    	text-indent:19px;
    	background:#323232;
    }
    .section1 .left .left-b{
    	margin-top:186px;
    	height:60px;
    	line-height:60px;
    	text-indent:19px;
    	background:#323232;
    }

    .section1 .right{
    	width:640px;
    	height:306px;
    	overflow:hidden;
    }
    .section1 .right img{
    	width:640px;
    	height:306px;
    	transition:0.3s all ease;
    }

    .section1 .right img:hover{
    	transform:scale(1.2,1.2);
    }

      /*底部*/
    .footer {
		  height: 457px;
		  padding-top: 54px;
		  background: #333; }
	.footer .container1{
		width:1020px;
		margin :0 auto;
	}
  	.footer .text {
		    display: block;
		    color: #fff;
		    font-size: 14px; }
  	.footer .msg {
	    height: 290px;
	    margin: 39px 0 49px; }
    .footer .msg .left {
	      width: 190px;
	      height: 290px;
	      color: #e8e8e8;
	      font-size: 13px; }
    .footer .msg .left span {
        display: block; }
    .footer .msg .left .left-a {
        color: #e8e8e8; }
    .footer .msg .left .left-a:hover {
        color: #fff;
        text-decoration: underline; }
    .footer .msg .left .about {
        margin: 44px 0 20px; }
    .footer .msg .left .erweima {
        height: 76px; }
    .footer .msg .left .erweima .left {
          width: 62px;
          height: 12px;
          background: url(image/img3.jpg) no-repeat;
          font-size: 13px;
          color: #969798;
          padding-top: 65px;
          text-align: center; }
    .footer .msg .left .erweima .right {
          width: 62px;
          height: 12px;
          background: url(image/weibo.jpg) no-repeat;
          background-size: 100%;
          font-size: 13px;
          color: #969798;
          padding-top: 65px;
          text-align: center;
          margin-left: 12px; }
    .footer .msg ul {
	      width: 700px;
	      height: 290px; }
    .footer .msg ul li {
	       width: 175px;
	        height: 290px;
	        float: left; }
    .footer .msg ul li .titl {
          font-size: 14px;
          color: #fff;
          margin-bottom: 18px; }
    .footer .msg ul li .tit2 {
          font-size: 14px;
          color: #fff;
          margin: 18px 0; }
    .footer .msg ul li .tit3 {
          font-size: 14px;
          color: #fff;
          margin: 38px 0 18px; }
    .footer .msg ul li a {
          font-size: 12px;
          color: #969798; }
    .footer .msg ul li a:hover {
          color: #fff;
          text-decoration: underline; }
  	.footer .bottom {
	    height: 56px;
	    background: #2e2e2e;
	    line-height: 56px;
	    color: #999;
	    padding-left: 250px;
	    font-size: 12px; }
  .footer .qq {
	    width: 36px;
	    height: 36px;
	    background: url(image/qq.png) no-repeat;
	    position: fixed;
	    right: 32px;
	    bottom: 71px; }
	</style>
</head>
<body>
	<header class="container">
		<h1 class="fl"><a href="index.html">logo</a></h1>
		<ul>
			<li>
				<a href="javascript:;">编辑图片</a>
				<ul>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
			</li>
			<li>
				<a href="javascript:;">影视档案</a>
			</li>
			<li>
				<a href="javascript:;">微利图库</a>
			</li>
			<li>
				<a href="javascript:;">视频</a>
			</li>
			<li class="border"></li>
			<li>
				<a href="javascript:;">汽车背景</a>
			</li>
			<li>
				<a href="javascript:;">推荐</a>
			</li>
			<li>
				<a href="javascript:;">供稿</a>
			</li>
		</ul>
		<div class="nav-right fr">
			<a href="#" class="fl"><img src="image/msg1.png" width="22" height="19" /></a>
			<a href="index1.html" class="fr"><img src="image/login.png"></a>
		</div>
	</header>
	<section class="container">
		<h2>高品精选</h2>
		<p>甄选最新、最热、最具代表性的图像组，激</p>
		<p class="p2">发你的无限创造力！</p>
	</section>
	<section class="section1">
		<div class="left fl">
			<div class="left-top">女性</div>
			<div class="left-b">+</div>
		</div>
		<div class="right fr">
			<img src="image/index2-1.png" />
		</div>
	</section>
	<section class="section1">
		<div class="left fl">
			<div class="left-top">科技</div>
			<div class="left-b">+</div>
		</div>
		<div class="right fr">
			<img src="image/index2-2.png" />
		</div>
	</section>
	<section class="section1">
		<div class="left fl">
			<div class="left-top">中国</div>
			<div class="left-b">+</div>
		</div>
		<div class="right fr">
			<img src="image/index2-3.png" />
		</div>
	</section>
	<section class="section1">
		<div class="left fl">
			<div class="left-top">汽车</div>
			<div class="left-b">+</div>
		</div>
		<div class="right fr">
			<img src="image/index2-4.png" />
		</div>
	</section>
	<section class="section1">
		<div class="left fl">
			<div class="left-top">风景</div>
			<div class="left-b">+</div>
		</div>
		<div class="right fr">
			<img src="image/index2-5.png" />
		</div>
	</section>
	<section class="section1">
		<div class="left fl">
			<div class="left-top">影视</div>
			<div class="left-b">+</div>
		</div>
		<div class="right fr">
			<img src="image/index2-6.png" />
		</div>
	</section>
	<section class="section1">
		<div class="left fl">
			<div class="left-top">情人节</div>
			<div class="left-b">+</div>
		</div>
		<div class="right fr">
			<img src="image/index2-7.png" />
		</div>
	</section>
	<section class="section1">
		<div class="left fl">
			<div class="left-top">工作</div>
			<div class="left-b">+</div>
		</div>
		<div class="right fr">
			<img src="image/index2-8.png" />
		</div>
	</section>
	<section class="section1">
		<div class="left fl">
			<div class="left-top">春节</div>
			<div class="left-b">+</div>
		</div>
		<div class="right fr">
			<img src="image/index2-9.png" />
		</div>
	</section>
	<section class="section1">
		<div class="left fl">
			<div class="left-top">家庭</div>
		</div>
		<div class="right fr">
			<img src="image/index2-10.png" />
		</div>
	</section>

	<div class="footer">
		<div class="container1">
			<a href="#" class="text">高品图像</a>
			<div class="msg">
				<div class="left fl">
					<span>免费热线：</span>
					<a href="#" class="left-a">400-8191-800</a>
					<span>服务电邮：</span>
					<a href="#" class="left-a">service@gaopinimages.com</a>
					<span class="about">关注我们</span>
					<div class="erweima">
						<div class="left fl">官方微信</div>
						<div class="right fl">官方微博</div>
					</div>

				</div>
				<ul class="fr">
					<li>
						<a href="#" class="titl">ABOUT</a>
						<a href="#">About Gaopin</a>
						<a href="#">高品新闻</a>
						<a href="#">加入我们</a>
						<a href="#">网站使用协议</a>
						<a href="#">隐私保护政策</a>
						<a href="#">Cookie政策</a>
						<a href="#">授权条款及条件</a>
					</li>
					<li>
						<a href="#" class="titl">创意图片</a>
						<a href="#">免版税RF</a>
						<a href="#">版权管理RM</a>
						<a href="#">汽车背景</a>
						<a href="#">GIF</a>
						<a href="#" class="tit2">编辑图片</a>
						<a href="#">纪实</a>
						<a href="#">历史</a>
						<a href="#">艺术</a>
						<a href="#" class="tit2">影视档案</a>
						<a href="#" class="titl">视频</a>
					</li>
					<li>
						<a href="#" class="titl">供稿通道</a>
						<a href="#">申请成为供稿人</a>
						<a href="#" class="tit3">高品专题</a>
						<a href="#" class="titl">高品影展</a>
					</li>
					<li>
						<a href="#" class="titl">我的账户</a>
						<a href="#">个人信息</a>
						<a href="#">收藏夹</a>
						<a href="#" class="tit2">客户服务</a>
						<a href="#">联系我们</a>
					</li>
				</ul>
			</div>
			<div class="qq"></div>
		</div>
		<div class="bottom">
			All contents © copyright 2017 Gaopin Images. All rights reserved. 本网站所有影像均由高品(北京)图像有限公司授权发布。侵权必究。京ICP备16000827号
		</div>
	</div>
</body>
</html>